<template>
  <div class="left-menu">
    <div class="menu-header">浅红智能平台</div>
    <div class="new-chat-bar">
      <el-button class="new-chat-btn" type="primary" plain icon="el-icon-refresh">开启新对话</el-button>
    </div>
    <div class="history-section">
      <div class="history-title">历史问题</div>
      <div class="menu-items">
        <div v-for="(q, idx) in historyQuestions" :key="idx" class="menu-item question-hover-wrapper">
          <span class="question-ellipsis" @mouseenter="showTip(idx, q, $event)" @mouseleave="hideTip">{{ q }}</span>
        </div>
        <transition name="fade-move">
          <div v-if="tip.visible" class="question-tip" :style="tip.style">{{ tip.text }}<span class="tip-arrow"></span></div>
        </transition>
      </div>
    </div>
    <div class="menu-footer">
      <div class="menu-item">
        <el-icon><QuestionFilled /></el-icon>
        <span class="why-span" @click="showWhy = true">为什么要开发这个项目？</span>
      </div>
    </div>
    <CenterDialog v-model="showWhy">
      因为爱，所有要爱。
    </CenterDialog>
  </div>
</template>

<script setup>
import { User, Document, Setting, Check, QuestionFilled } from '@element-plus/icons-vue'
import { historyQuestions } from '../../historyQuestions.js'
import { ref } from 'vue'
import CenterDialog from './CenterDialog.vue'
const tip = ref({ visible: false, text: '', style: {} })
const showWhy = ref(false)
function showTip(idx, text, evt) {
  const rect = evt.target.getBoundingClientRect()
  const tipWidth = Math.max(rect.width + 40, 180)
  const left = rect.left + window.scrollX + rect.width / 2 - tipWidth / 2
  const top = rect.top + window.scrollY - 50
  tip.value = {
    visible: true,
    text,
    style: {
      left: left + 'px',
      top: top + 'px',
      width: tipWidth + 'px',
      minWidth: '180px',
      maxWidth: '320px',
      pointerEvents: 'none',
    }
  }
}
function hideTip() {
  tip.value.visible = false
}
</script>

<style scoped>
.left-menu {
  width: 240px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
}

.menu-header {
  padding: 20px 20px 10px 20px;
  font-size: 22px;
  font-weight: bold;
  border-bottom: none;
  color: #222;
  letter-spacing: 1px;
}

.new-chat-bar {
  margin-top: 10px;
  padding: 0 20px 10px 20px;
}

.new-chat-btn {
  width: 60%;
  font-size: 15px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.history-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.history-title {
  font-size: 14px;
  color: #888;
  padding: 0 20px 4px 20px;
}

.menu-items {
  padding: 0 0 10px 0;
}

.menu-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu-item:hover,
.menu-item.active {
  background-color: #f0f2f5;
}

.menu-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.menu-footer {
  border-top: 1px solid #e6e6e6;
}

.question-ellipsis {
  display: inline-block;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  cursor: pointer;
}

.question-hover-wrapper {
  position: relative;
}

.fade-move-enter-active, .fade-move-leave-active {
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1), transform 0.18s cubic-bezier(.4,0,.2,1);
}
.fade-move-enter-from, .fade-move-leave-to {
  opacity: 0;
  transform: translateY(8px);
}
.fade-move-enter-to, .fade-move-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.question-tip {
  position: fixed;
  z-index: 9999;
  background: #222;
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  white-space: pre-line;
  line-height: 1.6;
  min-width: 180px;
  max-width: 320px;
  text-align: left;
  word-break: break-all;
  pointer-events: none;
}
.tip-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #222;
  content: '';
}
.why-span {
  color: #409eff;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.2s;
}
.why-span:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>